<template>
    <el-dialog v-el-drag-dialog title="输入密码" :visible="visible" @update:visible="updateVisible" @closed="doCloseEdit" destroy-on-close :close-on-press-escape="false" :close-on-click-modal="false">
        <el-form ref="addForm" hide-required-asterisk size="mini" :model="form" :rules="rules" :show-message="false" label-width="40px">
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="form.password" maxlength="8" :show-word-limit="true"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click.native="okClick">确定</el-button>
            <el-button size="mini" @click.native="doCloseEdit">取消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import NewsApi from '@/api/news'
import elDragDialog from '@/directive/el-drag-dialog'
export default {
    data() {
        return {
            form: {
                password: ''
            },
            rules: {
                password: [
                    { required: true, message: '密码不能为空' },
                ]
            }
        }
    },
    directives: {
        elDragDialog
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            type: [String, Number],
            default: 0
        },
        home: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        updateVisible(v) {
            this.$emit('update:visible', v)
        },
        doCloseEdit() {
            this.updateVisible(false)
        },
        okClick() {
            this.$refs.addForm.validate(async (bool, err) => {
                if (bool) {
                    if(this.home) {
                        await NewsApi.checkHomePassword({
                            id: this.id,
                            lockPassword: this.form.password
                        })
                    } else {
                        await NewsApi.checkPagePassword({
                            id: this.id,
                            lockPassword: this.form.password
                        })
                    }
                    this.$emit('result', true)
                } else {
                    for(const key in err) {
                        this.$message.error(err[key][0].message)
                        break;
                    }
                }
            })
        }
    }
}
</script>

<style scoped>
::v-deep .el-dialog {
    width: 340px;
    height: 160px;
    margin-top: 0px !important;
}
::v-deep .el-form {
    padding: 15px 0 0 0;
}
</style>